import React from 'react'
import { Button, message, Modal} from 'antd'
import Table from '../../../components/Table'
import 'whatwg-fetch'
import API from '../../../axios/api'
require('es6-promise').polyfill();


const columns = [
    { dataIndex: 'HallName', title: '班级', width: 150,},
    { dataIndex: 'PartnerAmount',width: 100, title: '合伙人数量',},
    { dataIndex: 'FansAmount', width: 100,title: '班级粉丝数',},
    { dataIndex: 'FansWeekPercentage',width: 150, title: '周增长/下降粉丝',},
    { dataIndex: 'ShareAmount', width: 100, title: '转发内容次数',},
    { dataIndex: 'OpenAmount', width: 100, title: '浏览内容次数',},
    { dataIndex: 'GroupBuyingAmount', width: 100, title: '发限活动总数',},
    { dataIndex: 'GroupBuyingShareAmount',  width: 100,title: '转发活动次数',},
    { dataIndex: 'GroupBuyingOpenAmount', width: 100, title: '活动浏览人数',},
    { dataIndex: 'OrderAmount',  width: 100,title: '下单总数',},
    { dataIndex: 'SaleOrderAmount', width:150, title: '销售总额',},
    { dataIndex: 'PayOrderCount', width: 100, title: '已付款下单数',},
    { dataIndex: 'PayOrderAmount', title: '已付款总额',},
]

export default class NetworkDataDetailList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tData: [],
            item: {},
            loading: true,
            modalShow: false,
            modalShowAddChild: false,
            PermissionParentId: '',
            dataId: 0,
            rudderId:'',
            Page: 1,
            Pages:1,
        }
    }

    onPageChange = (e) =>{
        this.setState({
            Page:e,
        },()=>{
            this.fetchTableData()
        })
    }

    // 获取表格数据
    fetchTableData =  async (id) => {
        let parms = {
            Page:this.state.Page,
            PageSize: 10,
            RudderId: this.state.rudderId,
        }
        await API.getRudderNetworkPage(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data.List,
                    Pages:res.Data.Pages
                });
            }
            this.setState({
                loading: false
            });
        })
    }

    componentWillReceiveProps(nextProps, nextContext) {
        this.setState({
            rudderId:nextProps.dataId
        },()=>{
           this.fetchTableData()

        })
    }

    render() {
        const {
            modalKey,
            visible,
            title,
            onCancel,
            roles,
            treeData,
            width,
        } = this.props
        return (
            <Modal
                wrapClassName="form"
                key={modalKey}
                visible={visible}
                title={title}
                onCancel={onCancel}
                footer={null}
                width={width}
            >
            <div id="wrap">
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            scroll={{y: 385 ,x:1400}}
                            total={this.state.Pages}
                            onChange={this.onPageChange}
                            currentPage={this.state.Page}
                        />
                    </div>
                </div>
            </div>
            </Modal>
        )
    }
}
